<template>
  <div>
    <div class="login__title-bar">登录</div>
    <div class="login__form-container">
      <van-field
        label-width="50px"
        label="手机号"
        v-model="phoneNum"
        @blur="blurPhoneInput"
        placeholder="请输入您的手机号"
        class="login-field"
      />
      <van-field
        center
        clearable
        label-width="50px"
        label="验证码"
        v-model="smsCode"
        placeholder="请输入短信验证码"
        class="login-field"
      >
        <template #button>
          <van-button v-if="showVerifyBtn" :disabled="disabledVerifyBtn" size="small" plain hairline type="danger" @click="getVerifyCode" style="background-color:#F2F3F4">获取验证码</van-button>
          <van-count-down v-else :time="time" format="ss" class="verify__code-count-down" @finish="finish"/>
        </template>
      </van-field>

      <div class="login-btn-bar">
        <van-button color="#F44336" class="login-btn" @click="login">登录</van-button>
      </div>
    </div>
    
  </div>
</template>

<script>
import qs from 'qs'
import storage from '../store/storage'
export default {
  data() {
    return {
      phoneNum: '',
      smsCode: '',
      disabledVerifyBtn: true,
      showVerifyBtn: true,
      time: 60 * 1000
    }
  },

  methods: {
    getVerifyCode() {
      console.log('get verify code.......');
      this.$axios.get(`/api/sms/code?phoneNum=${this.phoneNum}`)
      .then(res => {
        console.log(res);
        if (res.data.code === 200) {
          this.$notify({ type: 'success', message: res.data.data});
          this.showVerifyBtn = false;
        } else {
          this.$notify({ type: 'warning', message: res.data.message});
        }
      })
      .catch(err => {
        console.log(err);
      })
    },
    finish() {
      console.log('count down finish......');
      this.showVerifyBtn = true;
    },
    login() {
      // this.$router.push({path: '/contract-list'})
      console.log('phoneNum=========', this.phoneNum);
      console.log('smsCode==========', this.smsCode);
      let data = qs.stringify({
        phoneNum: this.phoneNum,
        smsCode: this.smsCode
      });

      console.log('data=========', data);
      // return;


      this.$axios.request({
        url: '/api/login',
        method: 'post',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        data: data
      })
      .then(res => {
        console.log(res);
        if (res.data.code === 200) {
          // 登录成功
          storage.set("token", res.data.token);
          this.$router.push({
            path: '/Tabbar'
          })
        } else {
          this.$notify({ type: 'warning', message: res.data.msg });
        }
      })
      .catch(err => {
        console.log(err);
      })
    },

    // 验证手机号
    blurPhoneInput() {
      console.log('blur phone num input field');
      this.disabledVerifyBtn = true;
      if (this.phoneNum === '') {
        this.$notify({ type: 'warning', message: '请输入手机号' });
        return;
      }
      if (!(/^1[3456789]\d{9}$/.test(this.phoneNum))) {
        this.$notify({ type: 'warning', message: '请输入格式正确的手机号' });
        return;
      }
      this.$axios.get(`/api/contract/verify?phoneNum=${this.phoneNum}`)
      .then(res => {
        console.log(res);
        if (res.data.code === 200) {
          this.disabledVerifyBtn = !res.data.data;
        } else {
          this.$notify({ type: 'warning', message: res.data.message });
        }
      })
      .catch(err => {
        console.log(err);
      })

    }
  }


}
</script>

<style scoped>
.login__title-bar {
  font-size: 28px;
  color: #111A34;
  font-weight: bold;
  padding: 45px 20px;
}
.login__form-container {
  margin-top: 60px;
}
.login-field {
  background-color: #F2F3F4;
  border-bottom: 1px solid #E8E8E8;
  width: 96%;
  margin: 0 auto;
  height: 55px;
}
.login-btn-bar {
  width: 100%;
  text-align: center;
  margin-top: 20px;
}
.login-btn {
  width: 343px;
  height: 44px;
}
.verify__code-btn {
  font-size: 16px;
  color: #F44336;
}
.verify__code-count-down {
  font-size: 16px;
  color: #C5CAD5;
}
</style>